<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" width="375" height="180">
    <van-swipe-item v-for="image in images" :key="image.id">
      <img v-lazy="image.imageUrl" :style="{width: '100%', height: '100%'}" />
    </van-swipe-item>
  </van-swipe>
  <!-- icon -->
  <div class="home-icon">
    <van-swipe :loop="false">
    <van-swipe-item class="icon">
      <ul>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
          <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
      </ul>
    <ul>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
          <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
      </ul>
    </van-swipe-item>
    <van-swipe-item class="icon">
      <ul>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
          <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
      </ul>
    <ul>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
          <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
        <li>
          <van-icon name="chat-o" class='icons'/>
          <span>天猫超市</span>
        </li>
      </ul>
    </van-swipe-item>
</van-swipe>
  </div>

  <!-- 破布加载 -->
    <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    >
  <div class="card">
    <div class="home-card"
    v-for="prod in list"
    :key="prod.id"
    @click="jumpToDetail(prod.id)"
    >
  <img :src="prod.image" alt="">
  <p>{{prod.title}}</p>
  <ul>
    <li>￥ <span class="home-price"> {{prod.price}}</span></li>
    <li class="home-text">看相似</li>
  </ul>
    </div>
  </div>
  </van-list>
  </div>
</template>

<script>
import { findBaoKuan } from '@/api/home'

export default {
  name: 'Home',
  data () {
    return {
      images: [],
      list: [], // 商品数据数组
      loading: false, // 列表中是否在加载当前页面数据
      finished: false, // 列表中是否数据加载完毕
      nextIndex: 0
    }
  },
  created () {
    // 轮播图
    this.$http.get('/api/tab/1?start=0', {
      headers: {
        'x-platform': 'pc'
      }
    })
      .then(data => {
        // console.log('轮播图', data)
        this.images = data.banners
      })
      .catch()
  },
  methods: {
    findProducts (star = 0) {
      return findBaoKuan(star)// 爆款商品
        .then(data => {
          this.list = [
            ...this.list,
            ...data.list
          ]
          console.log(this.list)
          this.nextIndex = data.nextIndex
          this.finished = data.isEnd
        })
        .catch(error => {
          console.log('异常', error.message, error.error)
        })
    },
    onLoad () {
      this.findProducts(this.nextIndex).then(() => {
        this.loading = false
      })
    },
    jumpToDetail (id) {
      this.$router.push('/detail?id=' + id)
    }
  }
}
</script>

<style lang="scss" scoped>
  .home-icon {
    width: 100%;
    font-size:20px;
    .icon {
      width: 100%;
      ul{
        display:flex;
        justify-content:space-around;
        li {
          display:flex;
          flex-direction: column;
          align-items: center;
          margin-top: 20px;
          margin-bottom: 20px;
          span {
            font-size:12px
          }
        }
      }
    }
  }
  .card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
    justify-content: space-between;
    .home-card {
      width: 48%;
      height: 250px;
      border-radius: 10px;
    img {
      width: 100%;
      height: 150px;
      margin: 0 auto;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    p {
      font-size: 12px;
      color: black;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    ul {
      display: flex;
      justify-content: space-between;
      li {
        font-size: 12px;
      }
      li:nth-child(1) {
          color: red;
          span{
            font-size: 14px;
            font-weight: 800;
          }
        }
        li:nth-child(2) {
          width: 50px;
          height: 20px;
          background: #ccc;
          text-align: center;
        }
    }
    }
  }

</style>
